<template>
	<v-content ref="content" single>
		<v-header title="设置" back background="#fff"></v-header>
		<div class="set">账号设置</div>
		<div class="listUser">
			<div class="item" @click="toPage('/pages/mine/personalInfo', { type: 0 })">
				<div class="left">
					<image class="image" src="/static/image/mine/icons/icon1.png" mode="aspectFit"></image>
				</div>
				<div class="right">
					<span>个人资料</span>
					<uni-icons type="forward" size="30" class="icons"></uni-icons>
				</div>
			</div>
			<div class="item" @click="toPage('/pages/mine/secure')">
				<div class="left">
					<image class="image" src="/static/image/mine/icons/icon2.png" mode="aspectFit"></image>
				</div>
				<div class="right">
					<span>账号安全</span>
					<uni-icons type="forward" size="30" class="icons"></uni-icons>
				</div>
			</div>
		</div>
		<div class="set">系统设置</div>
		<div class="listSystem">
			<div class="item" @click="toPage('/pages/mine/about')">
				<div class="left">
					<image class="image" src="/static/image/mine/icons/icon5.png" mode="aspectFit"></image>
				</div>
				<div class="right">
					<span>关于我们</span>
					<uni-icons type="forward" size="30" class="icons"></uni-icons>
				</div>
			</div>
			<div class="item" @click="loginout">
				<div class="left">
					<image class="image" src="/static/image/mine/icons/icon7.png" mode="aspectFit"></image>
				</div>
				<div class="right">
					<span>退出登录</span>
					<uni-icons type="forward" size="30" class="icons"></uni-icons>
				</div>
			</div>
		</div>
	</v-content>
</template>
<script>
import mixins from "@/mixins"
export default {
	mixins: [mixins],
	data() {
		return {
			extraIcon: {
				color: "#4cd964",
				size: "22",
				type: "gear-filled",
			},
			version: {},
			count: 1,
			canClear: true,
		}
	},
	methods: {
		clearCache() {
			if (!this.canClear) {
				return
			}
			this.canClear = false
			uni.showLoading({
				title: "清理中...",
			})
			setTimeout(
				() => {
					uni.hideLoading()
					uni.showToast({
						title: "清除缓存成功",
					})
					setTimeout(() => {
						this.canClear = true
					}, 1000)
				},
				this.count > 1 ? 500 : 1500
			)
			this.count++
		},
		init() {
			this.getNewVersion()
		},
		switch2Change(e) {
			// e.detail.value 是此时的状态
			console.log("switch2 发生 change 事件，携带值为", e.detail.value)
		},
		loginout() {
			uni.showModal({
				title: "提示",
				content: "确定退出登录吗？",
				success: ({ confirm }) => {
					if (confirm) {
						this.$store.commit("logout")
					}
				},
			})
		},
		async getNewVersion() {
			try {
				const res = await this.$axios.get("/api/system/castleVersion/newVersion")
				this.version = res
			} catch (error) {
				console.error('获取版本信息失败:', error)
			}
		},
	},
}
</script>
<style lang="scss" scoped>
.padding {
	padding: 0 30rpx;
}
.set {
	padding: 30rpx 30rpx 20rpx;
	font-size: 28rpx;
	color: #666;
	font-weight: 500;
}
.listUser,
.listSystem {
	margin: 0 30rpx 30rpx;
	background-color: #fff;
	border-radius: 12rpx;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	overflow: hidden;
}
.listUser {
	margin-bottom: 30rpx;
}
.listUser .item,
.listSystem .item {
	display: flex;
	align-items: center;
	justify-content: start;
	background-color: #fff;
	transition: all 0.3s ease;

	&:active {
		background-color: #f8f8f8;
	}

	.left {
		padding: 35rpx 0;
		padding-right: 20rpx;
		width: 120rpx;
		.image {
			margin: 0 45rpx 0 30rpx;
			width: 34rpx;
			height: 34rpx;
		}
	}
	.right {
		padding: 35rpx 0;
		padding-right: 20rpx;

		flex: 1;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid #f5f5f5;
		.icons {
			margin-left: auto;
			font-size: 40rpx !important;
			color: #d0d0d0 !important;
		}
		.text {
			margin-right: 20rpx;
			color: #999;
			font-size: 26rpx;
		}
		span {
			color: #333;
			font-size: 32rpx;
		}
	}

	&:last-child {
		.right {
			border-bottom: none;
		}
	}
}
.listSystem .item .right {
	justify-content: flex-start;
}
</style>
